<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'burn.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入查询条件按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'burn',
  data: function () {
    return {
      api: this.$api.burn,
      apiEdit: this.$api.burn + 'add',
      name: '工程控制配置',
      columns: [
        { title: '配置名称', key: 'burn_config_name', width: 140 },
        { title: '机种编码', key: 'model_code', width: 80 },
        { title: '机种名称', key: 'model_name', width: 160 },
        { title: '产品型号', key: 'sku_code', width: 120 },
        { title: '产品名称', key: 'sku_name', width: 160 },
        { title: '工单', key: 'mo_no' },
        { title: '开始工站', key: 'group_in_name', width: 100 },
        { title: '结束工站', key: 'group_out_name', width: 100 },
        { title: '管控时间(小时)', key: 'burn_in_hours', width: 80 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        { title: '配置名称', key: 'burn_config_name', span: 24 },
        {
          title: '机种编码',
          key: 'model_id',
          span: 24,
          name: 'select',
          options: [],
          props: {
            filterable: true,
            clearable: true,
          },
          events: {
            change: null,
          },
        },
        {
          title: '产品型号',
          key: 'sku_id',
          span: 24,
          name: 'select',
          options: [],
          props: {
            filterable: true,
            clearable: true,
          },
          events: {
            change: null,
          },
        },
        {
          title: '工单',
          key: 'mo_id',
          span: 24,
          name: 'select',
          options: [],
          props: {
            filterable: true,
            clearable: true,
          },
        },
        {
          title: '开始工站',
          key: 'group_in_id',
          span: 12,
          name: 'select',
          required: true,
          options: [],
          props: {
            filterable: true,
            clearable: true,
          },
        },
        {
          title: '结束工站',
          key: 'group_out_id',
          span: 12,
          required: true,
          name: 'select',
          options: [],
          props: {
            filterable: true,
            clearable: true,
          },
        },
        {
          title: '管控时间(小时)',
          key: 'burn_in_hours',
          required: true,
          span: 12,
          name: 'number',
          props: { precision: 2, step: 0.1 },
        },
      ],
    }
  },
  methods: {
    formatAfterGet(data) {
      //依据实际需求处理
      this.getSkuOptions(data.model_id)
      this.getMoOptions(data.sku_id)
      return data
    },
    modelChange: function (model_id) {
      this.$set(this.data, 'sku_id', '')
      this.getSkuOptions(model_id)
    },
    skuChange: function (sku_id) {
      this.$set(this.data, 'mo_id', '')
      this.getMoOptions(sku_id)
    },
    getSkuOptions: function (model) {
      this.setFieldOptions('sku_id', [])
      if (model) {
        this.$request(this.$api.sku + 'getbymodel', { model })
          .then((r) => {
            this.setFieldOptions('sku_id', r, 'id', ['key_part_no', 'key_part_name'])
          })
          .catch(() => {})
      }
    },
    getMoOptions: function (sku) {
      this.setFieldOptions('mo_id', [])
      if (sku) {
        this.$request(this.$api.mo + 'getbysku', { sku })
          .then((r) => {
            this.setFieldOptions('mo_id', r, 'id', 'mo_no')
          })
          .catch(() => {})
      }
    },
  },
  created: function () {
    this.getList()
    this.getFieldConfig('model_id').events.change = this.modelChange
    this.getFieldConfig('sku_id').events.change = this.skuChange
    this.$request(this.$api.model + 'getlist')
      .then((r) => {
        this.setFieldOptions('model_id', r.list, 'id', ['model_code', 'model_name'])
      })
      .catch(() => {})
    this.$request(this.$api.group + 'getlist', { mes_flag: 'Y' })
      .then((r) => {
        this.setFieldOptions('group_in_id', r, 'id', 'group_name')
        this.setFieldOptions('group_out_id', r, 'id', 'group_name')
      })
      .catch(() => {})
  },
}
</script>
<style scoped>
</style>
